<style>
.{{$t|escape:'html'}}_main {
  border-left: 15px solid #eaf2f5;
  border-right: 15px solid #eaf2f5;
  width: 1200px;
}
.{{$t|escape:'html'}}_subtitle {
  background-color: #e5f1f5;
  padding: 7px 0 7px 10px;
  font-family: Arial Black;
}
.{{$t|escape:'html'}}_emphasis {
  background-color: #d6e3e8;
  font-weight: bold;
  font-family: Trebuchet MS;
}
.{{$t|escape:'html'}}_status_text {
  font-weight: bold;
  padding-bottom: 5px;
  font-family: Arial;
}
table.{{$t|escape:'html'}}_table td.title {
  font-weight: bold;
  text-align: right;
  padding: 2px 10px 2px 20px;
  margin-right: 20px;
  background-color: #d6e3e8;
  font-family: Trebuchet MS;
  width: 150px;
  height: 30px;
}
table.{{$t|escape:'html'}}_table td.content {
  width: 400px;
}
table.{{$t|escape:'html'}}_extra {
  width: 100%;
}
table.{{$t|escape:'html'}}_extra td.title {
  font-weight: bold;
  padding: 2px 5px;
  font-family: Trebuchet MS;
  width: 300px;
}
table.{{$t|escape:'html'}}_inner {
  margin: 10px 0;
}
table.{{$t|escape:'html'}}_inner td.title {
  font-weight: bold;
  padding: 2px 5px;
  font-family: Trebuchet MS;
}
.{{$t|escape:'html'}}_eg {
  font-family: Trebuchet MS;
}
.{{$t|escape:'html'}}_text {
  width: 275px;
  height: 20px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_select {
  width: 280px;
  height: 26px;
  margin-left: 4px; 
}

.{{$t|escape:'html'}}_button {
  margin-top: 10px; 
  margin-left: 3px; 
}
.{{$t|escape:'html'}}_image_button {
  cursor: pointer;
}
table.{{$t|escape:'html'}}_list {
  width: 100%;
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: 1px;
}
table.{{$t|escape:'html'}}_list th {
  text-align: left;
  height: 30px;
  background-color: #d6e3e8;
  padding: 5px 0 5px 10px; 
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  font-size: 12px;
}
table.{{$t|escape:'html'}}_list tr.drop td {
  padding-left: 0;
  border-right: 0;
  border-bottom: 0;
}
table.{{$t|escape:'html'}}_list tr.hi td {
  padding-left: 10px;
  height: 35px;
  background-color: #ff8000;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd td {
  padding-left: 10px;
  height: 35px;
  background-color: #eeeeee;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.roweven td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_list tr.roweven:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_listdrop {
  width: 100%;
  border: 0;
}
table.{{$t|escape:'html'}}_listdrop td {
  border: 0;
}
table.{{$t|escape:'html'}}_listdrop td.title {
  padding: 5px 10px 5px 20px;
  height: 35px;
  background-color: #dde1eb;
  font-weight: bold;
  text-align: right;
  width: 100px;
  color: #7b7b7b;
  font-size: 11px;
}
</style>
<div class="{{$t|escape:'html'}}_main">
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="save_customer();">
        <table>
          <tr>
            <td><img src="image/btn/save24.png"></img></td>
            <td>{{t escape='html'}}Save{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  </div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}Basic Information{{/t}}</div>
    <table class="{{$t|escape:'html'}}_table">
      <tr style="padding-bottom: 50px;">
        <td class="title">{{t escape='html'}}Account / Email{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_email" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->email|escape:'html'}}{{/if}}"></input></td>
        <td class="title">{{t escape='html'}}Full Name{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_name" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->name|escape:'html'}}{{/if}}"></input></td>
      </tr>
      <tr>
        <td class="title">{{t escape='html'}}Password{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_password" type="password" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->password|escape:'html'}}{{/if}}" onchange="_pwchg=1;"></input></td>
        <td class="title">{{t escape='html'}}Phone{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_tel" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->tel|escape:'html'}}{{/if}}"></input></td>
      </tr>
      <tr>
        <td class="title">{{t escape='html'}}Secure Question{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_pw_question" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->pw_question|escape:'html'}}{{/if}}"></input></td>
        <td class="title">{{t escape='html'}}Mobile{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_mob" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->mob|escape:'html'}}{{/if}}"></input></td>
      </tr>
      <tr>
        <td class="title">{{t escape='html'}}Secure Answer{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_pw_answer" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->pw_answer|escape:'html'}}{{/if}}"></input></td>
        <td class="title">{{t escape='html'}}Credit Points{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_credit_points" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->credit_points|escape:'html'}}{{/if}}"></input></td>
      </tr>
      <tr>
      <td class="title">{{t escape='html'}}Customer Type{{/t}}</td>
      <td class="content">
        <select id="{{$t|escape:'html'}}_customer_type" class="{{$t|escape:'html'}}_select" ></select>
      </td>
      <td class="title">{{t escape='html'}}Status{{/t}}</td>
      <td class="{{$t|escape:'html'}}_status_text">
        <input id="{{$t|escape:'html'}}_approved" name="{{$t|escape:'html'}}_status" type="radio" {{if isset($customer) && $customer->status == 1}}checked="checked"{{else if !isset($customer)}}checked="checked"{{/if}}></input>{{t escape='html'}}Approved{{/t}}
        <input id="{{$t|escape:'html'}}_wait_for_approved" name="{{$t|escape:'html'}}_status" type="radio" {{if isset($customer) && $customer->status == 0}}checked="checked"{{/if}}></input>{{t escape='html'}}Waiting for approved{{/t}}
        <input id="{{$t|escape:'html'}}_suspended" name="{{$t|escape:'html'}}_status" type="radio" {{if isset($customer) && $customer->status == 2}}checked="checked"{{/if}}></input>{{t escape='html'}}Suspended{{/t}}
      </td>
    </tr>
      <tr>
        <td class="title">{{t escape='html'}}Registration IP{{/t}}</td>
        <td class="content"><input id="{{$t|escape:'html'}}_reg_ip" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->reg_ip|escape:'html'}}{{/if}}"></input></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
  <div style="display: none;">
    <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}Additional Data{{/t}}</div>
    <table class="{{$t|escape:'html'}}_extra">
      <tr>
        <td colSpan=2 style="vertical-align: top;">
          <table class="{{$t|escape:'html'}}_inner" style="margin-top: 0;">
            <tr>
              <td><input id="{{$t|escape:'html'}}_access_to_forum" type="checkbox" {{if isset($customer) && $customer->access_to_forum == 1}}checked="checked"{{/if}}></input></td>
              <td class="title" style="width: 330px;">Please allow access to forums and restricted content</td>
            </tr>
            <tr>
              <td><input id="{{$t|escape:'html'}}_send_price_list" type="checkbox" {{if isset($customer) && $customer->send_price_list == 1}}checked="checked"{{/if}}></input></td>
              <td class="title">Please send you price list</td>
            </tr>
            <tr>
              <td><input id="{{$t|escape:'html'}}_phone_me" type="checkbox" {{if isset($customer) && $customer->phone_me == 1}}checked="checked"{{/if}}></input></td>
              <td class="title">Please phone me</td>
            </tr>
          </table>
        </td>
        <td colSpan=2 style="vertical-align: top;">
          <div class="{{$t|escape:'html'}}_emphasis" style="width: 100%;">
            <table>
              <tr>
                <td style="width: 200px;text-align: left;padding-left: 20px;">Customer Logo Image(s)</td>
                <td>
                  <span id="spanButtonPlaceHolder"></span>
                  <input id="btnCancel" type="button" value="Cancel All Uploads" disabled="disabled" style="display: none;margin-left: 2px; font-size: 8pt; height: 29px;" />
                </td>
              </tr>
            </table>
          </div>
          <div id="{{$t|escape:'html'}}_gallery" style="padding: 5px 0 0 10px;"></div>
        </td>
      </tr>
      <tr>
        <td class="title">Your Studio Trading Name</td>
        <td class="title">Country</td>
        <td class="title">Website</td>
        <td class="title">Your blog address</td>
      </tr>
      <tr>
        <td><input style="width: 280px" id="{{$t|escape:'html'}}_company_name" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->company_name|escape:'html'}}{{/if}}"></input></td>
        <td><input style="width: 280px" id="{{$t|escape:'html'}}_country" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->country|escape:'html'}}{{/if}}"></input></td>
        <td><input style="width: 280px" id="{{$t|escape:'html'}}_link_web" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->link_web|escape:'html'}}{{/if}}"></input></td>
        <td><input style="width: 280px" id="{{$t|escape:'html'}}_link_blog" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->link_blog|escape:'html'}}{{/if}}"></input></td>
      </tr>
      <tr>
        <td class="title">Of these what percentage (%) use album</td>
        <td class="title">How many wedding do you shoot per year</td>
        <td class="title">how did you hear about us</td>
        <td></td>
      </tr>
      <tr>
        <td><input style="width: 280px" id="{{$t|escape:'html'}}_perc_of_use" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->perc_of_use|escape:'html'}}{{/if}}"></input></td>
        <td><input style="width: 280px" id="{{$t|escape:'html'}}_no_of_weds" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->no_of_weds|escape:'html'}}{{/if}}"></input></td>
        <td><input style="width: 280px" id="{{$t|escape:'html'}}_how_hear_us" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($customer)}}{{$customer->how_hear_us|escape:'html'}}{{/if}}"></input></td>
        <td></td>
      </tr>
      <tr>
        <td class="title" colSpan=2>Anything else we need to know about your business to be of service</td>
        <td class="title" colSpan=2>Any specific question you want help with right now</td>
      </tr>
      <tr>
        <td colSpan=2><textarea style="width: 580px;height: 80px;margin-left: 4px;" id="{{$t|escape:'html'}}_we_need_know">{{if isset($customer)}}{{$customer->we_need_know|escape:'html'}}{{/if}}</textarea></td>
        <td colSpan=2><textarea style="width: 580px;height: 80px;margin-left: 4px;" id="{{$t|escape:'html'}}_help_now">{{if isset($customer)}}{{$customer->help_now|escape:'html'}}{{/if}}</textarea></td>
      </tr>
    </table>
  </div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}Delivery Addresses{{/t}}</div>
    <table id="{{$t|escape:'html'}}_addresses" class="{{$t|escape:'html'}}_list" cellPadding="0" cellSpacing="0">
      <tr>
        <td style="height: 50px;padding-left: 10px;"><input id="{{$t|escape:'html'}}_addresses_select" type="checkbox"></input></td>
        <td style="padding-left: 10px;" colSpan=5>
          <table>
            <tr>
              <td><select id="{{$t|escape:'html'}}_addresses_actions"><option>{{t escape='html'}}Actions...{{/t}}</option></select></td>
              <td>
                <span class="image_button" style="width: 100px;" onclick="add_address();">
                  <table>
                    <tr>
                      <td><img src="image/btn/add.png"></img></td>
                      <td>{{t escape='html'}}Add New{{/t}}</td>
                    </tr>
                  </table>
                </span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th style="width: 50px;"></th>
        <th style="width: 150px;">{{t escape='html'}}Name{{/t}}</th>
        <th style="width: 600px;">{{t escape='html'}}Address{{/t}}</th>
        <th style="width: 75px;">{{t escape='html'}}Default{{/t}}</th>
        <th style="border-right: 0;"></th>
      </tr>
    </table>
  </div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="save_customer();">
        <table>
          <tr>
            <td><img src="image/btn/save24.png"></img></td>
            <td>{{t escape='html'}}Save{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  </div>
</div>

<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript">
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    
    var customer_types = ['普通会员', '中级会员', '高级会员', 'VIP会员'];
    
    var _id = {{if isset($customer)}}'{{$customer->id|escape:'javascript'}}'{{else}}0{{/if}};
    var _track = {{if $track_id != NULL}}'{{$track_id|escape:'javascript'}}'{{else}}MiscUtils.unique(){{/if}};
    var _images = JSON.parse('{{$images|@json_encode|escape:'javascript'}}');
    var _addresses = JSON.parse('{{$addresses|@json_encode|escape:'javascript'}}');
    var _customer = JSON.parse('{{$customer|@json_encode|escape:'javascript'}}');
    var _pwchg = 0;
    var _move = null;
    var _edit = null;
    var _y = 0;
    var _pbox = null;
    var _opane = null;
    var _selects = [];
    
    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
      
      setCustomerType();
      
      var tr, td, table, elm, div, p;
      //Upload Gallery Photos
      var pos = DOMUtils.findPos(document.getElementById('spanButtonPlaceHolder'));
      var up = null;
      var initFunc = function() {
        div = document.createElement('div');
        p = new ModulePopupBox();
        p._open(div, {
          pos : [ pos[0], pos[1] ],
          width : 468,
          t : '',
          doc : document
        });
        up = new ModuleUpload(document, div, 468, 260, null, null, {
          callbackFunc : function() {
            _images = _images.concat(up._files);
            setup_gallery();
          },
          popupBox : p
        });
      };
      var uu = new UploadUtils('');
      uu._uploadUrl = 'ecommerce/upload_customer_image.php';
      uu._buttonImageUrl = 'image/upload/browse.png';
      uu._buttonWidth = 94;
      uu._buttonHeight = 29;
      uu._createInstance('', {
        cti : _track,
        t : true
      }, initFunc, function(file, result) {
        up._callbackFunc(file, result);
      });
      
      setup_gallery();
      update_addresses_table();
      
      var select, actions;
      select = document.getElementById('{{$t|escape:'html'}}_addresses_select');
      select.onclick = function() {
        for (var idx in  _selects) {
          var obj = _selects[idx];
          obj.checked = this.checked;
        }
      };
      actions = document.getElementById('{{$t|escape:'html'}}_addresses_actions');
      actions.options[actions.options.length] = new Option('{{t escape='javascript'}}Delete{{/t}}');
      actions.onchange = function() {
        if (this.selectedIndex == 1) {
          var deletes = [];
          for (var idx in  _selects) {
            var obj = _selects[idx];
            if (obj.checked) {
              deletes[deletes.length] = obj._obj;
            }
          }
          new RequestUtils()._custom('delete_addresses', JSON.stringify(deletes), function(result, params) {
            var is_no_def = 0;
            for (var idx in  deletes) {
              var obj = deletes[idx];
              if (obj.is_default == 1) {
                is_no_def = 1;
              }
              MiscUtils.remove(_addresses, obj, null);
            }
            if (is_no_def == 1 && _addresses.length > 0) {
              _addresses[0].is_default = 1;
            }
            update_addresses_table();
            actions.selectedIndex = 0;
          }, {
            php: 'ecommerce/custom.php',
            pos : DOMUtils.findPos(this)
          });
        }
      };
    }
    
    function setCustomerType() {
      customer_type = document.getElementById('{{$t|escape:'javascript'}}_customer_type');
      DOMUtils.removeChildElements(customer_type);
      
      for (var i in customer_types) {
        var obj = customer_types[i];
        var op = new Option(obj);
        if (_customer && _customer.customer_type && op.text == _customer.customer_type) {
          op.selected = 'selected'; 
        }
        customer_type.options[customer_type.options.length] = op;
      }
    };
    
    function setup_gallery() {
      var table, tr, td, elm, gallery;
      
      gallery = document.getElementById('{{$t|escape:'javascript'}}_gallery');
      DOMUtils.removeChildElements(gallery);
      if (_images.length == 0) {
        elm = document.createElement('div');
        elm.appendChild(document.createTextNode('{{t escape='javascript'}}No Photos Found{{/t}}'));
        gallery.appendChild(elm);
      } else {
        table = document.createElement('table');
        gallery.appendChild(table);
        for(var i = 0, il = _images.length; i < il; i++) {
          if (i % 4 == 0) {
            tr = table.insertRow(-1);
          }
          td = tr.insertCell(-1);
          
          var file_obj = {
            id: _images[i].id,
            product_track_id: _images[i].product_track_id,
            large: _images[i].path,
            small: _images[i].path_tn,
            _large: 'ecommerce/' + _images[i].path,
            _small: 'ecommerce/' + _images[i].path_tn
          };
          var del_file_func = function(file_obj) {
            new RequestUtils()._custom('delete_customer_image', JSON.stringify(file_obj), function(result, params) {
              MiscUtils.remove(_images, file_obj, null);
              setup_gallery();
            }, {
              php: 'ecommerce/custom.php',
              pos : DOMUtils.findPos(this)
            });
          };
          Utils.imgDisp(file_obj, del_file_func, 80, 80, td);
        }
      }
    }
    
    function save_customer() {
      var customer = {
        track_id: '{{$track_id|escape:'javascript'}}',
        email: document.getElementById('{{$t|escape:'javascript'}}_email').value,
        password: document.getElementById('{{$t|escape:'javascript'}}_password').value,
        name: document.getElementById('{{$t|escape:'javascript'}}_name').value,
        mob: document.getElementById('{{$t|escape:'javascript'}}_mob').value,
        tel: document.getElementById('{{$t|escape:'javascript'}}_tel').value,
        reg_ip: document.getElementById('{{$t|escape:'javascript'}}_reg_ip').value,
        pw_question: document.getElementById('{{$t|escape:'javascript'}}_pw_question').value,
        pw_answer: document.getElementById('{{$t|escape:'javascript'}}_pw_answer').value,
        status: document.getElementById('{{$t|escape:'javascript'}}_approved').checked ? 1 : (document.getElementById('{{$t|escape:'javascript'}}_wait_for_approved').value ? 0 : 2),
        credit_points: document.getElementById('{{$t|escape:'javascript'}}_credit_points').value,
        customer_type: document.getElementById('{{$t|escape:'javascript'}}_customer_type').options[document.getElementById('{{$t|escape:'javascript'}}_customer_type').selectedIndex].text,
        company_name: document.getElementById('{{$t|escape:'javascript'}}_company_name').value,
        link_blog: document.getElementById('{{$t|escape:'javascript'}}_link_blog').value,
        link_web: document.getElementById('{{$t|escape:'javascript'}}_link_web').value,
        country: document.getElementById('{{$t|escape:'javascript'}}_country').value,
        perc_of_use: document.getElementById('{{$t|escape:'javascript'}}_perc_of_use').value,
        no_of_weds: document.getElementById('{{$t|escape:'javascript'}}_no_of_weds').value,
        how_hear_us: document.getElementById('{{$t|escape:'javascript'}}_how_hear_us').value,
        access_to_forum: document.getElementById('{{$t|escape:'javascript'}}_access_to_forum').checked ? 1 : 0,
        send_price_list: document.getElementById('{{$t|escape:'javascript'}}_send_price_list').checked ? 1 : 0,
        phone_me: document.getElementById('{{$t|escape:'javascript'}}_phone_me').checked ? 1 : 0,
        we_need_know: document.getElementById('{{$t|escape:'javascript'}}_we_need_know').value,
        help_now: document.getElementById('{{$t|escape:'javascript'}}_help_now').value
      };
      if (_pwchg == 1) {
        customer._password = customer.password;
      }
      
      if (_id != 0) {
        customer.id = _id;
        new RequestUtils()._custom('update_customer', JSON.stringify({ c: customer, a: _edit }), function(result, params) {
          location.href = 'admin.php?path=ecommerce&t=customers';
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      } else {
        new RequestUtils()._custom('customer', JSON.stringify(customer), function(result, params) {
          location.href = 'admin.php?path=ecommerce&t=customers';
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      }
    }
    
    function add_address() {
      var min = 0;
      for (var idx in _addresses) {
        var obj = _addresses[idx];
        if (obj.order < min) {
          min = obj.order;
        }
      }
      var address = {
        track_id: MiscUtils.unique(),
        customer_track_id: '{{$track_id|escape:'javascript'}}',
        name: '{{t escape='javascript'}}New Address{{/t}}',
        tel: '',
        mob: '',
        address: '',
        suburb: '',
        city: '',
        state: '',
        country: '',
        zip: '',
        is_default: 0,
        order: --min
      };
      new RequestUtils()._custom('address', JSON.stringify(address), function(result, params) {
        _addresses[_addresses.length] = result;
        update_addresses_table();
      }, {
        php: 'ecommerce/custom.php',
      });
    }
    
    function update_addresses_table() {
      var table, tr, td, elm, div;
      //Product Attributes
      table = document.getElementById('{{$t|escape:'javascript'}}_addresses');
      DOMUtils.removeTableRows(table, 2);
      if (_addresses.length == 0) {
        tr = table.insertRow(-1);
        tr.className = 'nohover';
        td = tr.insertCell(-1);
        td.colSpan = 6;
        td.style.padding = '5px 0 5px 10px';
        td.style.height = '35px';
        td.appendChild(document.createTextNode('{{t escape='javascript'}}No Addresses Found{{/t}}'));
        
      } else {
        _addresses = MiscUtils.sortByOrder(_addresses);

        for (var idx in _addresses) {
          var obj = _addresses[idx];
          
          tr = table.insertRow(-1);
          if (!_edit || _edit.id != obj.id) {
            document.body.onmouseup = function(ev) {
              ev = (ev) ? ev : window.event;
              if (!_move) {
                return;
              }
              new RequestUtils()._custom('address', JSON.stringify(_move), function(result, params) {
                _move = null;
                update_addresses_table();
              }, {
                php: 'ecommerce/custom.php',
                pos : [ev.clientX, ev.clientY]
              });
            };
            
            if (_move) {
              tr.style.cursor = 'move';
            }
            
            if (_move && obj.track_id == _move.track_id) {
              tr.className = 'hi';
            } else {
              tr.className = (idx % 2 == 1) ? tr.className = 'rowodd' : 'roweven';
            }
            
            td = tr.insertCell(-1);
            elm = document.createElement('input');
            elm.type = 'checkbox';
            elm._obj = obj;
            _selects.push(elm);
            td.appendChild(elm);
            
            td = tr.insertCell(-1);
            update_addresses_cell(obj, td);
            td.appendChild(document.createTextNode(obj.name));
            
            td = tr.insertCell(-1);
            update_addresses_cell(obj, td);
            td.appendChild(document.createTextNode(obj.address));
            
            td = tr.insertCell(-1);
            update_addresses_cell(obj, td);
            td.appendChild(document.createTextNode((obj.is_default == 1) ? '{{t escape='javascript'}}Yes{{/t}}' : '{{t escape='javascript'}}No{{/t}}'));
            
            td = tr.insertCell(-1);
            elm = document.createElement('img');
            elm.className = '{{$t|escape:'javascript'}}_image_button';
            elm.src = 'image/edit.png';
            elm._obj = obj;
            elm.onclick = function() {
              _edit = this._obj;
              update_addresses_table();
            }
            td.appendChild(elm);
          } else {
            tr.className = 'drop';
            td = tr.insertCell(-1);
            td.colSpan = 6;
            td.style.padding = 0;
            td.style.border = 0;
            setup_address_dialog(td);
          }
        }
      }
    }
    
    function update_addresses_cell(address, td) {
      if (_edit) {
        return;
      }
      if (!_move || address.track_id != _move.track_id) {
        td.style.cursor = 'move';
        td._obj = address;
        td.onmousedown = function(ev) {
          ev = (ev) ? ev : window.event;
          _move = this._obj;
          update_addresses_table();
          _y = ev.clientY;
        };
        td.onmouseover = function(ev) {
          ev = (ev) ? ev : window.event;
          if (OOBTUtils.move(_move, this._obj, _addresses, (ev.clientY - _y < 0))) {
            _y = ev.clientY;
            update_addresses_table();
          }
        };
      }
    }
    
    function setup_address_dialog(container) {
      var div, table, tr, td, itable, itr, itd, elm;
      
      var clone = MiscUtils.clone(_edit);
      
      DOMUtils.removeChildElements(container);
      
      table = document.createElement('table');
      container.appendChild(table);
      
      div = document.createElement('div');
      container.appendChild(div);
      div.style.textAlign = 'center';
      div.style.padding = '5px 0';
      div.style.backgroundColor = '#b4c8fa';
      elm = Utils.imgBtn('{{t escape='javascript'}}Update{{/t}}', 'image/btn/update.png');
      elm.style.width = '100px';
      elm.style.fontSize = '11px';
      elm.onclick = function () {
        new RequestUtils()._custom('address', JSON.stringify(_edit), function(result, params) {
          if (_edit.is_default == 1) {
            for (var idx in _addresses) {
              var obj = _addresses[idx];
              obj.is_default = 0;
            }
            _edit.is_default = 1;
          }
          _edit = null;
          update_addresses_table();
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      };
      div.appendChild(elm);
      elm = Utils.imgBtn('{{t escape='javascript'}}Cancel{{/t}}', 'image/btn/close.png');
      elm.style.width = '100px';
      elm.style.fontSize = '11px';
      div.appendChild(elm);
      elm.onclick = function() {
        for (var idx in _addresses) {
          if (_addresses[idx].id == _edit.id) {
            _addresses[idx] = clone;
          }
        }
        _edit = null;
        update_addresses_table();
      }
      div.appendChild(elm);
      
      div = document.createElement('div');
      div.style.backgroundColor = '#ffffff';
      div.style.borderLeft = '15px solid #b4c8fa';
      div.style.borderRight = '15px solid #b4c8fa';
      container.appendChild(div);
      
      table = document.createElement('table');
      table.style.width = '100%';
      div.appendChild(table);
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.width = '50%';
      
      itable = document.createElement('table');
      itable.className = '{{$t|escape:'html'}}_listdrop';
      itable.style.width = '100%';
      td.appendChild(itable);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Default{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'checkbox';
      elm.checked = (_edit.is_default == 1) ? 1 : 0;
      elm.onchange = function() {
        _edit.is_default = this.checked ? 1 : 0;
      };
      itd.appendChild(elm);
      
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Address{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.address;
      elm.onchange = function() {
        _edit.address = this.value;
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Name{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.name;
      elm.onchange = function() {
        _edit.name = this.value;
      };
      itd.appendChild(elm);
      
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Suburb{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.suburb;
      elm.onchange = function() {
        _edit.suburb = this.value;
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Phone{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.tel;
      elm.onchange = function() {
        _edit.tel = this.value;
      };
      itd.appendChild(elm);
      
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}City{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.city;
      elm.onchange = function() {
        _edit.city = this.value;
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Mobile{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.mob;
      elm.onchange = function() {
        _edit.mob = this.value;
      };
      itd.appendChild(elm);
      
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}State{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.state;
      elm.onchange = function() {
        _edit.state = this.value;
      };
      itd.appendChild(elm);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Zip Code{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.zip;
      elm.onchange = function() {
        _edit.zip = this.value;
      };
      itd.appendChild(elm);
      
      itd = itr.insertCell(-1);
      itd.className = 'title';
      itd.appendChild(document.createTextNode('{{t escape='javascript'}}Country{{/t}}'));
      itd = itr.insertCell(-1);
      elm = document.createElement('input');
      elm.type = 'text';
      elm.className = '{{$t|escape:'html'}}_text';
      elm.style.height = '18px';
      elm.value = _edit.country;
      elm.onchange = function() {
        _edit.country = this.value;
      };
      itd.appendChild(elm);
      
      div = document.createElement('div');
      container.appendChild(div);
      div.style.padding = '5px 0';
      div.style.backgroundColor = '#b4c8fa';
    }
</script>